/*
 * @Author: codeD
 * @Date: 2022-02-17 19:11:44
 * @LastEditors: codeD
 * @LastEditTime: 2022-02-18 20:46:06
 * @Description: 分类页
 * @FilePath: \wpt\src\pages\Classification\index.tsx
 */


import React, { useEffect ,useState} from 'react';
import Search from "./../../components/Search";
import styles from "./index.module.css";
import { useClassIfy } from './effect'
import { ImgLists, GoodsLists } from './type'
const Classification = () => {
  const { goodsList ,doms,currentShow,handleChangeTab,navigators} = useClassIfy();


 
  
  return (
    <div className="wpt-page-container">
      <div className={styles["search-wrap"]}>
        <Search
          placeholder="嘻嘻x"
          defaultValue="猫吃鱼"
          onSearch={(v) => {
            console.log("我要基于value去做我的业务逻辑了", v);
          }}
        />
      </div>
      <div className={styles["page-wrap"]}>
        <div className={styles["tab-wrap"]}>
          { goodsList.map((item: GoodsLists, index: number) => (
            <div
              className={styles["tab-item"]}
               style={index === currentShow ? { color: "red" } : undefined}
              key={item.cateId}
              onClick={()=>handleChangeTab(index)}
            >
              {item.cateName}
            </div>
          ))}
        </div>
        <div className={styles["content-wrap"]}>
          { goodsList.map((item: GoodsLists, index: number) => (
            <div
              className={styles["tab-content"]}
              key={item.cateId}
            >
              <div id={`tab-item-${index}`}>{item.cateName}</div>
              <div className={styles['imgGig-wrap']}>
                {item.secCategory?.map((item: ImgLists, index: number) => {
                  return (
                    <div className={styles['secCateName-wrap']} key={item.icon} onClick={()=>navigators(item.cateId,item.secCateId)}>
                      <img className={styles['imgGig']} src={item.icon} alt="" />
                      <div className={styles['secCateName']}>{item.secCateName}</div>
                    </div>
                  )
                })}
                <div

                  className={styles["observer-item"]}
                  ref={doms[index]}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}


export default Classification;